<script setup lang="ts">
import EchartBar from '@/components/Echart/Bar/BarChart.vue'
import * as echarts from 'echarts'
import { reactive } from '@vue/reactivity'
const chartData = reactive({
  name: 'top10SalesPercentage',
  legend: {
    right: '1%',
    top: '1%',
    itemWidth: 0,
    itemHeight: 0,
    textStyle: {
      fontSize: 14,
      lineHeight: 15,
      color: '#5DF5F3',
    },
  },
  grid: {
    left: '3%',
    right: '3%',
    bottom: '5%',
    top: '10%',
    containLabel: true,
  },
  stack: 'total',
  xAxis: {
    type: 'category',
    data: ['中国区', '非洲区', '美洲区', '亚太区', '欧美区'],
    axisTick: {
      show: false,
    },
    axisLabel: {
      color: '#fff', // 设置 X 轴标签字体颜色

      interval: 0, // 强制显示所有标签
      fontSize: 13.99,
      margin: 5, // 调整标签与轴线的距离
    },
  },
  yAxis: {
    type: 'value',
    axisLine: {
      show: true,
    },
    splitLine: {
      show: false,
    },
  },
  series: [
    {
      type: 'bar',
      name:"畅销品top10出库金额",
      stack: 'total',
      data: [15, 20, 25, 10, 15],
      barWidth: 20,
      label: {
        show: true,
        position: 'top',
        formatter: '{c}%',
      },
      emphasis: {
        focus: 'series',
      },
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          { offset: 0, color: '#5640e2' },
          { offset: 0.3, color: '#5640e2' },
          { offset: 1, color: '#0abafe' },
        ]),
        barBorderRadius: [4, 4, 0, 0],
      },
    },
  ],
})
</script>
<template>
  <el-carousel-item>
    <card-box>
      <!-- <template v-slot:title>
        <h1 class="titlte">全球畅销品top10出库金额占比</h1>
      </template> -->
      <EchartBar :chart-data="chartData"></EchartBar>
    </card-box>
  </el-carousel-item>
</template>
